/**
 * Created by web-01 on 2018/2/6.
 */
$(()=>{//广告轮播图 ------ 大
   $.getJSON("data/index/getCarousel.php")  //用get方法从getCarousel.php文件中获取json格式数据
       .then(data=>{
           for(var i = 0; i < 5; i++){
               var arr = [];
               arr.push(data[i]);
               console.log(arr);
           }
           var html = "";
           for(var p of data){
               html += `<li>
					<a href="${p.href}">
					    <img src="${p.img}" alt="${p.title}">
					</a>
			   </li>`;
           }
           //轮播循环完后，展示出第一张轮播图的数据，轮播图数量(3+1)
           html +=`<li>
                <a href="${data[0].href}">
                    <img src="${data[0].img}" title="${data[0].title}">
                </a>
           </li>`;
           //设置轮播的宽高
           var LIWIDTH=702,moved=0,interval=500,wait=3000,timer=null;
           var $ul=$("#banner");
           $ul.html(html).css("width",(data.length + 1) * LIWIDTH);

           //设置小圆点
           var $ultabs = $("#banner-tabs");
           //在轮播图中添加data.length个平铺的小圆点，并为第一个小圆点设置class名为js-selected
           $ultabs.html("<li></li>".repeat(data.length))
                        .children().first().addClass("js-selected");

           //设置move函数，  dir表示轮播图上的左右按钮
           function move(dir = 1) {
               if(moved ==0 && dir == -1){
                   moved = data.length;
                   $ul.css("left", -LIWIDTH * data.length);
               }
               moved += dir;
               $ul.animate({
                   left: -LIWIDTH * moved
               }, interval, function(){
                   if(moved == data.length){
                       moved = 0;
                       $ul.css("left", 0);
                   }
                   $ultabs.children(":eq("+moved+")").addClass("js-selected")
                       .siblings().removeClass("js-selected");
               });
           }
           timer = setInterval(move, wait + interval);
           $("#first-floor-middle-top").hover(
               function () {
                   clearInterval(timer);
                   timer = null;
               },
               function () {
                   timer = setInterval(move, wait + interval);
               }
           );

           $ultabs.on("click", "li:not(.js-selected)", function () {
               var i = $(this).index();
               moved = i;
               $ul.stop(true).animate({
                   left:-LIWIDTH*moved
               },interval,function(){
                   $ultabs.children(":eq("+moved+")").addClass("js-selected")
                       .siblings().removeClass("js-selected");
               })
           });

           $(".ck-right").click(function(){
               if(!$ul.is(":animated"))
                   move();
           });
           $(".ck-left").click(function(){
               if(!$ul.is(":animated"))
                   move(-1);
           });
       })
});